<template>
    <div>
        <baidu-map  v-bind:style="mapStyle" class="bm-view" ak="你的百度地图ak" :center="center" :zoom="zoom"
                   :scroll-wheel-zoom="true"
                   @click="getClickInfo" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom"
                   @zoomend="syncCenterAndZoom"
                    @ready="handler"
        >
            <bm-view style="width: 100%; height:500px;"></bm-view>
            <bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="true"
                       animation="BMAP_ANIMATION_BOUNCE">
            </bm-marker>
            <bm-control :offset="{width: '10px', height: '10px'}">
                <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">
                    <input type="text" placeholder="请输入搜索关键字" class="serachinput">
                </bm-auto-complete>
            </bm-control>
            <bm-local-search :keyword="keyword" :auto-viewport="true"
                             style="width:0px;height:0px;overflow: hidden;"></bm-local-search>
        </baidu-map>
    </div>
</template>

<script>
    import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker} from 'vue-baidu-map';

    export default {
        name: "Map",
        created() {
            var map = new BMap.Map("allmap");
            var point = new BMap.Point(116.331398,39.897445);
            map.centerAndZoom(point,12);

            function myFun(result){
                var cityName = result.name;
                map.setCenter(cityName);
                alert("当前定位城市:"+cityName);
            }
            var myCity = new BMap.LocalCity();
            myCity.get(myFun)
            },
        components: {
            BaiduMap,
            BmControl,
            BmView,
            BmAutoComplete,
            BmLocalSearch,
            BmMarker
        },
        data: function () {
            return {
                showMapComponent: this.value,
                keyword: '',
                mapStyle: {
                    width: '100%',
                    height: this.mapHeight + 'px'
                },
                center: {lng: 116.404, lat: 39.915},
                zoom: 15
            }
        },
        watch: {
            value: function (currentValue) {
                this.showMapComponent = currentValue;
                if (currentValue) {
                    this.keyword = ''
                }
            }
        },
        methods: {
            /***
             * 地图点击事件。
             */
            getClickInfo(e) {
                this.center.lng = e.point.lng;
                this.center.lat = e.point.lat
            },
            syncCenterAndZoom(e) {
                const {lng, lat} = e.target.getCenter();
                this.center.lng = lng;
                this.center.lat = lat;
                this.zoom = e.target.getZoom()
            },
            handler({BMap, map}){
                const geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition((r)=>{
                    this.center = {lng: r.longitude, lat: r.latitude};   // 设置center属性值
                    this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};   // 自定义覆盖物
                    this.initLocation = true;
                    console.log('center:', this.center)  // 如果这里直接使用this是不行的
                },{enableHighAccuracy: true})

            }
        }
    }
</script>

<style scoped>
    .serachinput {
        width: 300px;
        box-sizing: border-box;
        padding: 9px;
        border: 1px solid #dddee1;
        line-height: 20px;
        font-size: 16px;
        height: 38px;
        color: #333;
        position: relative;
        border-radius: 4px;
        -webkit-box-shadow: #666 0px 0px 10px;
        -moz-box-shadow: #666 0px 0px 10px;
        box-shadow: #666 0px 0px 10px;
    }
</style>
